<template>
  <el-container>
    <el-header class="mainHeader" style="background-color: rgb(30,34,42)">
      <div class="header_left">
        <span class="header_title" v-if="userInfo.rid===1" style="color: white">欢迎用户</span>
        <span class="header_title" v-if="userInfo.rid===2" style="color: white">欢迎商家</span>
        <span class="header_title" v-if="userInfo.rid===3" style="color: white">欢迎管理员</span>
        <span class="header_title" v-if="userInfo.rid===4" style="color: white">欢迎骑手</span>
      </div>
      <div class="header_right">
        <div class="search">
          <!--                    <i class="el-icon-search"></i>-->
        </div>
        <div class="notice">
          <!--                    <i class="el-icon-bell"></i>-->
        </div>
        <div class="avatar" style="padding-top: 15px">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="el-avatar"></el-avatar>
        </div>
        <div class="user">
          <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item ><span @click="loginOut">退出登录</span></el-dropdown-item>
              <!--                          <el-dropdown-item ><span>我的中心</span></el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <!--店铺人员界面-->
      <el-aside width="250px" v-if="userInfo.rid===2" style="background-color: rgb(30,34,42)">
        <el-menu
            :default-active="activeIndex1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="rgb(30,34,42)"
            text-color="#fff"
            router
            active-text-color="black">

          <el-submenu index="1" v-if="shopInfo.stat===1" style="border-bottom: 1px solid rgb(30,34,42)">
            <template slot="title">
              <i class="el-icon-menu" style="color: rgb(30,34,42)"></i>
              <span style="color: white;">我的店铺</span>
            </template>
            <el-menu-item-group>
              <!--                                <template slot="title" style="color: black">店铺情况</template>-->
              <!--                                <el-menu-item index="/dataMessage">数据统计</el-menu-item>-->
              <el-menu-item index="/shopMessage" style="color: white;border-top: 1px solid rgb(30,34,42)">店铺信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2" v-if="shopInfo.stat===1" style="border-bottom: 1px solid rgb(30,34,42)">
            <template slot="title">

              <i class="el-icon-s-order" style="color: rgb(30,34,42)"></i>
              <span style="color: white">店铺管理</span>
            </template>
            <el-menu-item-group style="border-top: 1px solid rgb(30,34,42)">
              <el-menu-item index="/goodsManage">
                <span slot="title" style="color: white">菜品管理</span>
              </el-menu-item>
              <el-menu-item index="/categoryManage" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">类别管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3" v-if="shopInfo.stat===1">
            <template slot="title">
              <i class="el-icon-s-claim" style="color: rgb(30,34,42)"></i>
              <span style="color: white">订单管理</span>
            </template>
            <el-menu-item-group style="border-bottom: 1px solid rgb(30,34,42)">
              <el-menu-item index="/newOrder" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">新的订单</span>
              </el-menu-item>
              <el-menu-item index="/oldOrder" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">已接订单</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!--店铺未通过申请显示不可用-->
          <el-submenu index="1" disabled v-if="shopInfo.stat===0">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="color: black">我的店铺</span>
            </template>
            <el-menu-item-group>
              <template slot="title" style="color: black">店铺情况</template>
              <!--                                <el-menu-item index="/dataMessage">数据统计</el-menu-item>-->
              <el-menu-item index="/shopMessage" style="color: black">店铺信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!--店铺未通过申请显示不可用-->
          <el-submenu index="2" disabled v-if="shopInfo.stat===0">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="color: black">店铺管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/goodsManage">
                <span slot="title" style="color: black">菜品管理</span>
              </el-menu-item>
              <el-menu-item index="/categoryManage">
                <span slot="title" style="color: black">类别管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!--店铺未通过申请显示不可用-->
          <el-submenu index="3" disabled v-if="shopInfo.stat===0">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span style="color: black">订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/newOrder">
                <span slot="title" style="color: black">新的订单</span>
              </el-menu-item>
              <el-menu-item index="/oldOrder">
                <span slot="title" style="color: black">已接订单</span>
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>


        </el-menu>
      </el-aside>

      <!--用户界面-->
      <el-aside width="250px" v-if="userInfo.rid===1" style="background-color: rgb(30,34,42)">
        <el-menu
            :default-active="activeIndex5"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="rgb(30,34,42)"
            text-color="#fff"
            router
            active-text-color="black">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-claim" style="color: rgb(30,34,42)"></i>
              <span style="color: white">用户管理</span>
            </template>
            <el-menu-item-group style="border-bottom: 1px solid rgb(30,34,42)">
              <el-menu-item index="/home_user" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">主页</span>
              </el-menu-item>
              <el-menu-item index="/order" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">订单</span>
              </el-menu-item>
              <el-menu-item index="/my_user" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">我的</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!--骑手界面-->
      <el-aside width="250px" v-if="userInfo.rid===4" style="background-color: rgb(30,34,42)">
        <el-menu
            :default-active="activeIndex4"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="rgb(30,34,42)"
            text-color="#fff"
            router
            active-text-color="black">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-claim" style="color: rgb(30,34,42)"></i>
              <span style="color: white">订单管理</span>
            </template>
            <el-menu-item-group style="border-bottom: 1px solid rgb(30,34,42)">
              <el-menu-item index="/newRiderOrder" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">新的订单</span>
              </el-menu-item>
              <el-menu-item index="/oldRiderOrder" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">已接订单</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!--管理员界面-->
      <el-aside width="200px" v-if="userInfo.rid===3" style="background-color: #fced6e">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            background-color="rgb(30,34,42)"
            text-color="#fff"
            router
            active-text-color="black">
          <el-submenu index="1" style="border-bottom: 1px solid rgb(30,34,42)">
            <template slot="title">
              <i class="el-icon-menu" style="color: rgb(30,34,42)"></i>
              <span style="color:white">店铺管理</span>
            </template>
            <el-menu-item-group>
              <!--                            <template slot="title" style="color: black">店铺管理</template>-->
              <el-menu-item index="/allShops" style="color: white;border-top: 1px solid rgb(30,34,42)">所有店铺</el-menu-item>
              <el-menu-item index="/shopApplyFor" style="color: white; border-top: 1px solid rgb(30,34,42)">店铺申请</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" style="border-bottom: 1px solid rgb(30,34,42)">
            <template slot="title">
              <i class="el-icon-s-check" style="color: rgb(30,34,42)"></i>
              <span style="color: white">用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/userManager" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">用户管理</span>
              </el-menu-item>
              <!--                            <el-menu-item index="/riderManager">-->
              <!--                                <span slot="title">骑手管理</span>-->
              <!--                            </el-menu-item>-->
              <el-menu-item index="/shopManagerManager" style="border-top: 1px solid rgb(30,34,42)">
                <span slot="title" style="color: white">店铺管理人员管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>



        </el-menu>
      </el-aside>
      <!--店铺审核通过-->
      <el-main style="text-align: center;" v-if="shopInfo!=null&&shopInfo.stat===1">
        <router-view/>
      </el-main>
      <!--店铺未审核-->
      <el-main style="text-align: center" v-if="shopInfo!=null&&shopInfo.stat===0">
        <el-empty description="店铺正在审核中，请耐心等待。。。。" ></el-empty>
      </el-main>
      <!--管理员-->
      <el-main style="text-align: center;" v-if="shopInfo.stat===null">
        <router-view/>
      </el-main>
    </el-container>
    <el-footer  class="el-footer1" style="background-color: rgb(30,34,42)">外卖点餐系统</el-footer>
  </el-container>
</template>

<script>
import { debug } from "console";
import Toast from "vant/lib/toast";

export default {
  name: "Index",
  created(){
    this.userInfo = this.$route.query.userInfo;
    const that = this;
    console.log("============="+this.userInfo);
    if(this.userInfo.rid===2){
      this.axios.get("http://localhost:8084/findShopByUid",{
        params:{
          uid:this.userInfo.smid
        }
      }).then((resp)=>{
        that.shopInfo = resp.data;
        that.$store.commit("SET_SID",resp.data.sid);
        console.log(that.shopInfo);
        this.$router.push("/shopMessage")
      })
    }else if(this.userInfo.rid===3){
      this.$router.push("/allShops")
    }else if(this.userInfo.rid===4){
      that.$store.commit("SET_DID",this.userInfo.did);
      this.$router.push("/newRiderOrder")
    }


  },

  data(){
    return{
      activeIndex:"/allShops",
      activeIndex1:"/shopMessage",
      activeIndex4:"/newRiderOrder",
      activeIndex5:"/home_user",
      userInfo:"",
      shopInfo:{
        stat:null
      }

    }
  },


  methods: {
    /*点击导航栏携带数据跳转*/
    /*handleSelect(index,indexPath){
        console.log(index);
        this.$router.push({
            name:index,
            params:{
                userInfo:this.userInfo
            }
        })
    },*/

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },

    //退出登录
    loginOut(){
      Toast("退出登录");
      if(this.userInfo.rid===2){
        this.$store.commit("SET_SHOPMANAGERINFO",null);
        this.$router.push("/toManagerLogin")
      }else if(this.userInfo.rid===3){
        this.$store.commit("SET_MANAGERINFO",null);
        this.$router.push("/toManagerLogin")
      }else if(this.userInfo.rid===4){
        this.$store.commit("SET_RIDERINFO",null);
        this.$router.push("/toRiderLogin")
      }else if(this.userInfo.rid===1){
        this.$store.commit("SET_USERINFO",null);
        this.$router.push("/toUserLogin")
      }

    }
  }
}
</script>

<style scoped>
.el-container {
  background-color: rgb(30, 34,42);
  height: 1000px;
}
.el-header, .el-footer {
  background-color:white;
  color: #333333;
  text-align: center;
  line-height: 60px;
}
.el-menu {
  background-color:  rgb(30,34,42);
}
.el-aside {
  background-color: rgb(30,34,42);
  color: #ffffff;
  line-height: 300px;
  height: 100vh;
}
.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 25px;
}
.header_left {
  background-color: rgb(30,34,42);
}
.mainHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px 0px 60px;
  height: 60px;
}
.header_title {
  color: #0b8ee5;
  font-size: 22px;
  font-weight: 600;
}

.header_right {
  display: flex;
  align-items: center;
}
.search {
  margin-right: 40px;
}
.el-icon-search {
  font-size: 18px;
  color: #1a1a1b;
}

.notice {
  margin-right: 60px;
}
.el-icon-bell {
  font-size: 18px;
  color: #1a1a1b;
}

.avatar {
  margin-right: 12px;
}
.el-avatar {
  height: 30px;
  width: 30px;
}
.el-aside{
  height:670px;
}
/*.user {
    cursor: pointer;
}*/
.el-dropdown-link {
  color: #ffffff;
  font-size: 16px;
  outline: none;
}

.el-footer1{
  color:white;
}

</style>
